<!DOCTYPE html>
<html>
    {% load static %}
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap core CSS -->
<link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
<!--external css-->
<link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    
<!-- Custom styles for this template -->
<link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
<link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'assets/js/jquery.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>


<!--common script for all pages-->
<script src="{% static 'assets/js/common-scripts.js' %}"></script>

<!--script for this page-->

<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="{% static 'assets/js/echarts.js' %}"></script>
<script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/dist/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main.js' %}"></script>
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'assets/dist/notice.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/default.min.css' %}">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">

    <script>
        //plant改变
        $(document).ready(function() {
            $("#plant2").change(function(){ 
                
                $.ajax({
                    type: "POST",
                    url: "{% url 'MM:ajax_getStockByName' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //plant值
                        name:$("#plant2").val(),
                    },
                    
                    success: function(data) {
                        $('#test2').text(data);
                        //add：如果没有该工厂，回传回来一个message提示
                        var dataObj = eval("("+data+")");
                        //注意：plant选择空的时候，这三项也返回空
                        fields = dataObj[0].fields
                        $("#pgrp2").val(fields.pGrp);
                        $("#pOrg2").val(fields.pOrg);
                        $("#company2").val(fields.companyCode);
                    },
                    failure: function() {
    
                    }
                });
            
            }); 
            $("#plant3").change(function(){ 
                
                $.ajax({
                    type: "POST",
                    url: "{% url 'MM:ajax_getStockByName' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //plant值
                        name:$("#plant3").val(),
                    },
                    
                    success: function(data) {
                        $('#test2').text(data);
                        //add：如果没有该工厂，回传回来一个message提示
                        var dataObj = eval("("+data+")");
                        //注意：plant选择空的时候，这三项也返回空
                        fields = dataObj[0].fields
                        $("#pgrp3").val(fields.pGrp);
                        $("#pOrg3").val(fields.pOrg);
                        $("#company3").val(fields.companyCode);
                    },
                    failure: function() {
    
                    }
                });
            
            }); 
            $.ajax({
                type: "POST",
                url: "{% url 'MM:ajax_load_sorg' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择销售组织</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Sorg+'>'+ dataObj[i].Sorg + '--' + dataObj[i].Name1 + '</option>' ;
                    }
                    var items=document.getElementsByName("sorg");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_meaunit' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择单位</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Meaunit+'>'+ dataObj[i].Meaunit + '--' + dataObj[i].Name + '</option>' ;
                    }
                    
                    var items=document.getElementsByName("meaunit");
                    console.log(items);
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }
                },
                failure: function() {
    
                }
            });
            
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_plant' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择工厂</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Plant+'>'+ dataObj[i].Plant + '--' + dataObj[i].Name + '</option>' ;
                    }
                    //由于一个页面里有多个表单，所以用name寻找各个下拉框进行赋值
                    var items=document.getElementsByName("plant");
                    console.log(items);
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_porg' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组织</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Porg+'>'+ dataObj[i].Porg + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("porg");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_company' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择公司编码</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].CompanyCode+'>'+ dataObj[i].CompanyCode + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("company");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {
    
                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_pgrp' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Pgrp+'>'+ dataObj[i].Pgrp + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("pgrp");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }  
                },
                failure: function() {
    
                }
            });
            
        });
    function re(){
        document.getElementById("fu").style.display="none";
                document.getElementById("yuan").style.display="";
    }
    </script>
    {{context}}
    <body>
        <section id="main-content">
            <section class="wrapper">
                <h3><i class="fa fa-angle-right"></i> 创建商品收据
                </h3>
                
              <div class="row mt">  
                  <div class="col-lg-12">
                    <div class="col-lg-12">
                      <div class="content-panel">
                      <h4 ><i class="fa fa-angle-right"></i> 商品收据信息</h4>
                          <section id="unseen">
                            <form id="material3">
                                <table class="table">
                                
                                    <tbody>
                                    <tr>
                                        <td>
                                            <label>采购订单编码：</label>
                                            <label id='po_id'>{{context.po}}</label>
                                        </td>
                                        <td style="width: 350px;">
                                            <label>条目编号：</label>
                                            <label id='oi_id'>{{context.itemId}}</label>
                                        </td>
                                        
                                    </tr>
                                    
                        
                            </table>
                            <table class="table">
                                
                                <tbody>
                                    <tr>
                                        <td>
                                            <label>商品名称：</label>
                                            <label>{{context.material_.mname}}</label>
                                        </td>
                                        
                                        <td style="width: 350px;">
                                            <label>库存类型：</label>
                                            <select name="" id="sType">
                                                <option value="1">1--冻结库存</option>
                                                <option value="2">2--质量检验库存</option>
                                                <option value="3">3--无限制使用库存</option>
                                                <option value="4">4--在途库存</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>订购订单数量：</label>
                                            <label id=''>{{context.quantity}}</label>
                                        </td>
                                        
                                        <td >
                                            <label>实收数量：</label>
                                            <label ><input type="text" id='actualQnty' required ></label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>收货日期：</label>
                                            <label><input type="text" id="my-input" ></label>
                                        </td>
                                        
                                        <td >
                                            <label>过账日期：</label>
                                            <label><input type="text" id="my-input2"></label>
                                        </td>
                                    </tr>
                                    
                                    <script src="{% static 'assets/js/the-datepicker.js' %}"></script>
                                    <script>
                                        (function () {
                                            const input = document.getElementById('my-input');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                        (function () {
                                            const input = document.getElementById('my-input2');
                                            const datepicker = new TheDatepicker.Datepicker(input);
                                            datepicker.render();
                                        })();
                                    </script>
                                   
                                </tbody>
                            </table>

                            <table class="table">
                                
                                <tbody>
                                    <tr>
                                        <td>
                                            <label>请对本次交易进行评价：</label>
                                            
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        <td>
                                            <label>商品质量：</label>
                                            
                                        </td>
                                        
                                        <td>
                                            <label>服务态度：</label>
                                            
                                        </td>
                                        
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="starts">
                                                <ul id="pingStar">
                                                 <li rel="1" title="20分">★</li>
                                                 <li rel="2" title="40分">★</li>
                                                 <li rel="3" title="60分">★</li>
                                                 <li rel="4" title="80分">★</li>
                                                 <li rel="5" title="100分">★</li>
                                                 <span id="dir"></span>
                                                </ul>
                                                <input type="hidden" value="" id="startP">
                                               </div>
                                        </td>
                                        <td>
                                            <div class="starts">
                                                <ul id="pingStar2">
                                                 <li rel="1" title="20分">★</li>
                                                 <li rel="2" title="40分">★</li>
                                                 <li rel="2" title="60分">★</li>
                                                 <li rel="4" title="80分">★</li>
                                                 <li rel="5" title="100分">★</li>
                                                 <span id="dir2"></span>
                                                </ul>
                                                <input type="hidden" value="" id="startP2">
                                               </div>
                                        </td>
                                        <style>
                                            ul,li{
                                                list-style: none;
                                            }
                                            .starts,.starts ul{float:left;}
                                            .starts{padding-left:16px;padding-top:7px;}
                                            .starts ul li{float:left;color:#ddd;padding-right:3px;font-size:20px;cursor: pointer;}
                                            .starts ul li.on{color:red;}
                                            .starts ul span{display:inline;float:left;padding-left:10px;margin-top: 10px;}
                                            </style>
                                            <script>
                                                window.onload = function () {
                                                var s = document.getElementById("pingStar"),
                                                 m = document.getElementById('dir'),
                                                 n = s.getElementsByTagName("li"),
                                                 input = document.getElementById('startP'); //保存所选值
                                                clearAll = function () {
                                                 for (var i = 0; i < n.length; i++) {
                                                  n[i].className = '';
                                                 }
                                                }
                                                for (var i = 0; i < n.length; i++) {
                                                 n[i].onclick = function () {
                                                  var q = this.getAttribute("rel");
                                                  clearAll();
                                                  input.value = q;
                                                  for (var i = 0; i < q; i++) {
                                                   n[i].className = 'on';
                                                  }
                                                  m.innerHTML = this.getAttribute("title");
                                                 }
                                                 n[i].onmouseover = function () {
                                                  var q = this.getAttribute("rel");
                                                  clearAll();
                                                  for (var i = 0; i < q; i++) {
                                                   n[i].className = 'on';
                                                  }
                                                 }
                                                 n[i].onmouseout = function () {
                                                  clearAll();
                                                  for (var i = 0; i < input.value; i++) {
                                                   n[i].className = 'on';
                                                  }
                                                 }
                                                }
                                        
                                                var s2 = document.getElementById("pingStar2"),
                                                 m2 = document.getElementById('dir2'),
                                                 n2 = s2.getElementsByTagName("li"),
                                                 input2 = document.getElementById('startP2'); //保存所选值
                                                clearAll2 = function () {
                                                 for (var i = 0; i < n2.length; i++) {
                                                  n2[i].className = '';
                                                 }
                                                }
                                                for (var i = 0; i < n2.length; i++) {
                                                 n2[i].onclick = function () {
                                                  var q = this.getAttribute("rel");
                                                  clearAll2();
                                                  input2.value = q;
                                                  for (var i = 0; i < q; i++) {
                                                   n2[i].className = 'on';
                                                  }
                                                  m2.innerHTML = this.getAttribute("title");
                                                 }
                                                 n2[i].onmouseover = function () {
                                                  var q = this.getAttribute("rel");
                                                  clearAll2();
                                                  for (var i = 0; i < q; i++) {
                                                   n2[i].className = 'on';
                                                  }
                                                 }
                                                 n2[i].onmouseout = function () {
                                                  clearAll2();
                                                  for (var i = 0; i < input2.value; i++) {
                                                   n2[i].className = 'on';
                                                  }
                                                 }
                                                }
                                               }
                                        
                                            </script>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="col-sm-9"></div>
                            <button  class="btn btn-danger btn-xs" type="reset" >重置</button>
                            <div class="col-sm-2"></div>
                            <button class="btn btn-primary btn-xs" type="submit" formmethod="post" onclick="return tip()">提交</button>
                        </form>

                                    
                          </section>
                    </div><!-- /content-panel -->
                </div>
                </div><!-- /col-md-12 -->
                </div><!-- /row -->
            </div>
  
          </section>
        </section><!-- /MAIN CONTENT -->
  
        <!--main content end-->
        <!--footer start-->
        <footer class="site-footer">
            <div class="text-center">
                2014 - Alvarez.is
                <a href="basic_table.html#" class="go-top">
                    <i class="fa fa-angle-up"></i>
                </a>
            </div>
        </footer>
        <!--footer end-->
    </section>

        {% comment %} <textarea id="item_result"></textarea> {% endcomment %}

        <script>
            //库存类型下拉框 此处搬了plant的
        //就四个，上次没写

        //提交
        $('#material3').on('submit', function(e) {
            e.preventDefault();
            $.ajax(
            {
                type: "POST",
                url: "{% url 'MM:ajax_create_receipt' %}",
                data:{
                    dataType: "json",
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    //$("#id").html() 这样取label内的值
                    po_id: $("#po_id").html(),
                    oi_id: $("#oi_id").html(),
                    actualQnty: $("#actualQnty").val(),
                    sType: $("#sType").val(),
                    postTime:  $("#my-input").val(), //过帐
                    time:  $("#my-input2").val(),// 收货
                    qualityScore: $("#startP").val(),
                    serviceScore: $("#startP2").val(),
                    //两个评分的id是startP、startP2；两个日期的id是my-input、my-input2；
                },
                success: function(data) {
                    $('#item_result').text(data);
                    var dataObj = eval("("+data+")");
                    if(dataObj.status==1){
                        showMessage({text: dataObj.message ,type: 'success'});
                    }else{
                        showMessage({text: dataObj.message ,type: 'error'});
                    }
                },
                failure: function() {

                }
            })
        });
        </script>


        <!-- 确认提示 -->
        <script>
            function tip(){
                if(confirm("您确认修改吗？")){
                return true;
                }
                else{
                return false;
                }
            } 
        </script>

        <script>
            //商品搜索 三项内容都填才能发起搜索，否则返回提示:请填写xxx（第一个未填的项）；如果搜不到，返回提示：没有符合条件的商品（这个也不返回了，可以判断是否为序列中只有一个元素）
            $('#material1').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_item' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        //输入三个搜索框的值
                        mid: $("#materialInput1").val(),
                        plant: $("#materialInput2").val(),
                        sloc: $("#materialInput3").val(),
                    },
                    success: function(data) {
                        document.getElementById("fu").style.display="";
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                        fields = dataObj[0].fields;
                        material = dataObj[0].material;
                        stock = dataObj[0].stock;
                        user = dataObj[0].user;
                        //输入表单material3的属性的id
                        $("#pk2").val(material.id);
                        $("#mname2").val(material.mname); 
                        $("#mType2").val(material.mType);
                        $("#meaunit2").val(material.meaunit);
                        $("#netWeight2").val(material.netWeight);
                        $("#weightUnit2").val(material.weightUnit);
                        $("#transGrp2").val(material.transGrp);
                        $("#loadingGrp2").val(material.loadingGrp);
                        $("#industrySector2").val(material.industrySector);
                        $("#mGroup2").val(material.mGroup);
                        $("#sloc2").val(fields.sloc);
                        $("#sorg2").val(fields.sOrg);
                        $("#distrchannel2").val(fields.distrChannel);
                        $("#company2").val(stock.companyCode);
                        $("#porg2").val(stock.pOrg);
                        $("#pgrp2").val(stock.pGrp);
                        $("#plant2").val(stock.name);
                        //document.getElementById("material3").style.visibility="visible";
                    },
                    failure: function() {

                    }
                })
            });

            //编号搜索 如果搜不到，返回提示：没有符合条件的商品（这个就不返回了，可以判断是否为空）
            $('#material2').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_search_item' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        mid: '',
                        mname: $("#mname").val(),
                        mType: $("#mType").val(),
                        industrySector: $("#industrySector").val(),
                        sloc: $("#sloc").val(),
                        plant: $("#plant").val(),
                        uid: $('#uid').val(),
                    },
                    success: function(data) {

                        $('#item_result').text(data);
                    
                        var dataObj = eval("("+data+")");
                        var out = "";
                        var i;
                        
                        for(i = 0; i < dataObj.length; i++) {
                            //dataObj[i].fields.xx
                            fields = dataObj[i].fields
                            material = dataObj[i].material
                            stock = dataObj[i].stock
                            user = dataObj[i].user
                            out += '<tr><td>'+ material.id+ '</td><td>' + material.mname+ '</td><td>' + material.mType+ '</td><td>' + material.industrySector+ '</td><td>'+ stock.name+ '</td><td>'+ fields.sloc+ '</td><td>'+ user.username + '</td><tr>';
                        }
                        document.getElementById("searchDiv").innerHTML=out;
                    },
                    failure: function() {

                    }
                })
            });

            //双击行 信息进入“搜索商品条件”三个框
            $("table").on("dblclick","tr",function(e){
                document.getElementById("materialInput1").value=$(this).find('td').eq(0).text();
                document.getElementById("materialInput2").value=$(this).find('td').eq(4).text();
                document.getElementById("materialInput3").value=$(this).find('td').eq(5).text();
                $('#myModal1').modal('hide');
            });

            //提交修改信息 必填的值如果为空，则不提交，并返回错误提示：请填写xxx（第一个未填的项），必填项见word/微信发的图；提交成功后，返回提示：商品信息已更新
            //0-> fail; 1->succeed; {'status':1, 'message':"xxx", 'fields':[xxx,xxx]}
            $('#material3').on('submit', function(e) {
                e.preventDefault();
                $.ajax(
                {
                    type: "POST",
                    url: "{% url 'MM:ajax_update_item' %}",
                    data:{
                        dataType: "json",
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                        material_id: $("#pk2").val(),
                        mname: $("#mname2").val(),
                        mType: $("#mType2").val(),
                        meaunit: $("#meaunit2").val(),
                        netWeight: $("#netWeight2").val(),
                        weightUnit: $("#weightUnit2").val(),
                        transGrp: $("#transGrp2").val(),
                        loadingGrp: $("#loadingGrp2").val(),
                        industrySector: $("#industrySector2").val(),
                        mGroup: $("#mGroup2").val(),
                        sloc: $("#sloc2").val(),
                        sOrg: $("#sorg2").val(),
                        distrChannel: $("#distrchannel2").val(),
                        companyCode: $("#company2").val(),
                        pOrg: $("#porg2").val(),
                        pGrp: $("#pgrp2").val(),
                        name: $("#plant2").val(),
                        //输入修改信息
                    },
                    success: function(data) {
                        $('#item_result').text(data);
                        var dataObj = eval("("+data+")");
                    if(dataObj.status==1){
                        showMessage({text: dataObj.message ,type: 'success'});
                    }else{
                        showMessage({text: dataObj.message ,type: 'error'});
                    }
                    //0-> fail; 1->succeed; {'status':1, 'message':"xxx", 'fields':[xxx,xxx]}
                    //根据status写。。。
                    },
                    failure: function() {

                    }
                })
            });
        </script>

    </body>
</html>